<template>
   <div>
        <slot></slot>
        <div :ref="componentRef" :style="{height:height+'px'}"></div>
   </div>
</template>
<script>

import * as echarts from 'echarts'

export default {
    name:'EchPieChar',
    components:{},
    props:{
        componentRef:[String,Number],
        height:{
            type:Number,
            default:200
        },
        option:{
            type:Object,
            default:()=>{}
        }
       
    },
    watch:{
        
        option:{
            handler:function (val, oldVal) {
                this.setOption()
            },
            deep:true,
        }
    },
    data(){
        return{
            char:null,
        }
    },
    computed:{
       
    },

    created(){

    },
    mounted () {
        this.$nextTick(() => {
            if(!this.char){
                this.char = echarts.init(this.$refs[this.componentRef])
            }
            this.setOption()
        })
    },
    methods:{
        setOption(){
            let option = {
                title:{
                    show:this.option.title.show,
                    text:this.option.title.text,
                    textStyle:{
                        color:this.option.title.textStyle.color,
                        fontStyle:this.option.title.textStyle.fontStyle,
                        fontWeight:this.option.title.textStyle.fontWeight,
                        fontSize:this.option.title.textStyle.fontSize
                    }
                },
                legend:{
                    show:this.option.legend.show,
                    left:this.option.legend.left+"%",
                    top:this.option.legend.top+"%",
                    right:this.option.legend.right+"%",
                    bottom:this.option.legend.bottom+"%",
                    orient: this.option.legend.orient,
                },
                tooltip: {
                    show:this.option.tooltip.show,
                    trigger: "item",
                    axisPointer: {type:this.option.tooltip.axisPointer.type},
                },
                grid: {
                    show:this.option.grid.show,//是否显示网格
                    borderColor:this.option.grid.borderColor,//网格颜色
                    borderWidth:this.option.grid.borderWidth,//网格宽度
                    left: this.option.grid.left+"%",
                    top: this.option.grid.top+"%",
                    right: this.option.grid.right+"%",
                    bottom: this.option.grid.bottom+"%",
                    containLabel:true,//是否防止标签溢出
                },
                
                series: [{
                    name:'饼状图',
                    type: "pie",
                    data: [
                        { value: 1048, name: '饼1' },
                        { value: 735, name: '饼2' },
                        { value: 580, name: '饼3' },
                        { value: 484, name: '饼4' },
                        { value: 300, name: '饼5' }
                    ],
                }]
            }
            this.char.setOption(option)
        }
    }
}
</script>